<!--这是供 场地 详情组件-->
<template>
  <div class="app-container">
    <el-form :model="postForm" v-loading="formLoading" :rules="rules" ref="postForm" label-width="220px" label-position="right">
      <p class="title">发布 供 场地</p>
      <el-form-item>
        <el-upload
          action=""
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="postForm.dialogVisible">
          <img width="100%" :src="postForm.dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="场地名称：" prop="name">
        <el-input v-model="postForm.fieldName" placeholder="请输入场地名称（不超过36个字）" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="所在地区：" prop="place">
        <v-distpicker :province="postForm.citySelect.province" :city="postForm.citySelect.city" :area="postForm.citySelect.area" style="float: left;"></v-distpicker>
      </el-form-item>
      <el-form-item label="详细地址：" prop="address">
        <el-input v-model="postForm.address" placeholder="详细地址" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="场地类别：" prop="type">
        <el-select v-model="postForm.fieldType" clearable placeholder="请选择" style="width: 650px" @change="typeSelect">
          <el-option v-for="item in fieldOptions" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日均费用：" prop="cost">
        <el-select v-model="postForm.selectCost" placeholder="请选择" style="width: 650px" @change="costSelect">
          <el-option v-for="item in costOptions" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="容纳人数：" prop="memberNum">
        <el-input v-model="postForm.memberNum" placeholder="请填写容纳人数" style="width: 650px"></el-input>
      </el-form-item>
      
      <el-form-item label="场地简介：">
        <el-input v-model="postForm.fieldIntro" placeholder="场地简介(非必填，不超过100个字)" style="width: 650px;"></el-input>
      </el-form-item>
      <el-form-item label="联系人：" prop="contact">
        <el-input v-model="postForm.contact" placeholder="请填写联系人" style="width: 650px"></el-input>
      </el-form-item>
      
      <el-form-item label="联系方式：" prop="phone">
        <el-input v-model="postForm.phone" placeholder="请填写联系方式" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="微信号：">
        <el-input v-model="postForm.wechatNum" placeholder="请填写微信号" style="width: 650px"></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
        <el-button type="info">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import VDistpicker from 'v-distpicker' // 引入城市选择器插件

const postForm = {
  fieldName: null, // 场地名称
  citySelect: { province: '福建省', city: '厦门市', area: '集美区' }, // 所在地区
  address: null, // 详细地址
  fieldType: null, // 选择的场地类别
  selectCost: null, // 日均费用
  memberNum: null, // 容纳人数
  fieldIntro: null, // 场地简介
  contact: null, // 联系人
  phone: null, // 联系方式
  wechatNum: null, // 微信号
  dialogImageUrl: '',
  dialogVisible: false
}
const costOptions = [
  { id: 0, value: '免费' },
  { id: 1, value: '1千以下' },
  { id: 2, value: '1千-2千' },
  { id: 3, value: '2千-5千' },
  { id: 4, value: '5千-1万' },
  { id: 5, value: '1万-2万' },
  { id: 6, value: '2万-5万' },
  { id: 7, value: '5万以上' }
]
const fieldOptions = [
  { id: 0, value: '不限' },
  { id: 1, value: '会所' },
  { id: 2, value: '户外' },
  { id: 3, value: '山庄' },
  { id: 4, value: '酒店' },
  { id: 5, value: '其他' }
]

const rules = {
  name: [{ required: true, message: '请输入场地名称', trigger: 'blur' }],
  place: [{ required: true, message: '请选择所在地区', trigger: 'change' }],
  address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
  type: [{ required: true, message: '请选择场地类别', trigger: 'change' }],
  cost: [{ required: true, message: '请选择日均费用', trigger: 'change' }],
  memberNum: [{ required: true, message: '请输入容纳人数', trigger: 'blur' }],
  contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
}

export default {
  components: {
    VDistpicker
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postForm: Object.assign({}, postForm),
      costOptions,
      fieldOptions,
      rules,
      formLoading: false,
      btnLoading: false
    }
  },
  methods: {
    typeSelect(val) {
    },
    costSelect(val) {
    },
    submitForm() {
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
<style scoped>
	.title{
		font-size: 18px;
		line-height: 36px;
		padding: 0 10px;
	}
</style>